<template>
	<scroll-view class="conversations" scroll-y="true">
		<view v-if="conversations.length !=0">
			<view class="scroll-item" v-for="(conversation, key) in conversations" :key="key" @tap.stop="navigateToChat(conversation)">
				<view class="item-head">
					<image :src="conversation.data.avatar" class="head-icon"></image>
					<view class="item-head_unread" v-if="conversation.unread">{{conversation.unread}}</view>
				</view>
				<view class="scroll-item_info">
					<view class="item-info-top">
						<text class="item-info-top_name">{{conversation.data.name}}</text>
						<view class="item-info-top_time">{{formatDate(conversation.lastMessage.timestamp)}}</view>
					</view>
					<view class="item-info-bottom">
						<view class="item-info-bottom-item">
							<view class="item-info-top_content" v-if="conversation.lastMessage.type == 'text'">
								{{conversation.lastMessage.payload.text}}</view>
							<view class="item-info-top_content" v-else>[[未识别内容]]</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-conversation" v-else>
			当前没有会话
		</view>
	
		<!-- <view @click="sendTextMessage">测试发送问好消息</view> -->
	</scroll-view>
</template>

<script>
	export default {
		name: "contacts",
		data() {
			return {
				unreadTotal: 0,
				conversations: []
			}
		},
		
		onShow() {
			//监听会话列表变化
			this.goEasy.im.on(this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, (content) => {
				this.renderConversations(content);
			})
			
			//加载会话列表
			this.goEasy.im.latestConversations({
				onSuccess: (result) => {
					let content = result.content;
					this.renderConversations(content)
					uni.hideLoading()
				},
				onFailed: (error) => {
					//获取失败
					uni.hideLoading()
					console.log("失败获取最新会话列表, code:" + error.code + " content:" + error.content)
				}
			});
		},
		methods: {
			renderConversations(content) {
				this.conversations = content.conversations || [];
				let unreadTotal = content.unreadTotal;
				this.$store.commit('setUnReadChatNum',content.unreadTotal)
				this.setUnreadAmount(unreadTotal);
			},
			setUnreadAmount(unreadTotal) {
				this.unreadTotal = unreadTotal;
				if (this.unreadTotal > 0) {
					uni.setTabBarBadge({
						index: 0,
						text: this.unreadTotal.toString()
					});
				} else {
					uni.removeTabBarBadge({
						index: 0
					});
				}
			},
			navigateToChat(conversation) {
				uni.navigateTo({
					url: './privateChat?to=' + conversation.userId
				});
			},
			
			sendTextMessage() {
				//发送测试消息
			    this.content = 'Hi,我已通过你的好友申请~'
				this.friend = {
					"uuid": "181961177366597",
					"name": "毛澤东",
					"avatar": this.getImgUrl('181963662852165')
				}
				if (this.content.trim() !== '') {
					let textMessage = this.goEasy.im.createTextMessage({
						text: this.content,
						to : {
							id : this.friend.uuid,
							type : this.GoEasy.IM_SCENE.PRIVATE,
							data : {
								name:this.friend.name,
								avatar:this.friend.avatar
							}
						}
					});
					this.sendMessage(textMessage);
				}
			},
			sendMessage(message){
				let toId = message.to.id;
				let imService = getApp().globalData.imService
            	let localHistory = imService.getPrivateMessages(toId)
				localHistory.push(message)
				this.goEasy.im.sendMessage({
					message: message,
					onSuccess: function (message) {
						console.log("发送成功.", message);
					},
					onFailed: function (error) {
						console.log("发送失败:",error);
					}
				});
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.conversations {
		width: 750rpx;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100%;
	}

	.conversations .scroll-item {
		height: 152rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
	}

	.conversations .scroll-item .head-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 28rpx;
	}

	.conversations .scroll-item_info {
		height: 151rpx;
		width: 590rpx;
		padding-right: 32rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #EFEFEF;
	}

	.conversations .scroll-item_info .item-info-top {
		padding-top: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.conversations .item-info-top_name {
		font-size: 34rpx;
		color: #262628;
	}

	.conversations .item-info-top_time {
		font-size: 26rpx;
		color: rgba(179, 179, 179, 0.8);
		font-family: Source Han Sans CN;
	}

	.conversations .item-info-bottom {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.conversations .item-info-bottom-item {
		display: flex;
		justify-content: space-between;
	}

	.item-info-bottom .item-info-top_content {
		font-size: 30rpx;
		color: #b3b3b3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.no-conversation {
		width: 100%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #9D9D9D;
	}

	.item-head {
		position: relative;
	}

	.item-head .item-head_unread {
		padding: 6rpx;
		background-color: #EE593C;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 28rpx;
		border-radius: 24rpx;
		min-width: 24rpx;
		min-height: 24rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 15rpx;
	}
</style>
